<template>
  <div class="statisticstements-container">
    <p class="page-title">统计与报表</p>
    <el-divider></el-divider>
    <div class="content-container">
      <el-text
        tag="b"
        size="large"
        class="sub-title"
      > 概述</el-text>
      <div class="descriptions-container">
        <el-descriptions
          border
          :column="2"
        >
          <el-descriptions-item label="单位名称">{{userStore.info_data.name}}</el-descriptions-item>
          <el-descriptions-item
            label="组委会总数"
            v-if="is_show_organizing"
          >{{statistics_data.agentNum??0}}</el-descriptions-item>
          <el-descriptions-item label="机构总数">
            <el-text title="已通过审核机构总数">{{statistics_data.institutionNum??0}}</el-text>
          </el-descriptions-item>
          <!-- <el-descriptions-item label="学员总数">{{statistics_data.studentNum??0}}</el-descriptions-item> -->
          <el-descriptions-item
            label="目标完成情况"
            v-if="is_show_organizing"
          >

            <el-text title="已绑定学员总数/目标总数">
              {{statistics_data.paidNum??0}}/{{statistics_data.totalNumber??0}}
            </el-text>
          </el-descriptions-item>
          <el-descriptions-item
            label="目标完成情况"
            v-else
          >
            <el-text title="已绑定学员总数/目标总数">

              {{statistics_data.paidNum??0}}/{{userStore.info_data.targetNumber??0}}
            </el-text>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="header-container">
        <span>
          <el-text
            tag="b"
            size="large"
            class="sub-title"
          > 学员情况</el-text>
          <el-text size="large"> ({{findTitle}})</el-text>
        </span>
        <el-space>
          <!-- <OrganizingSelect
            v-model="query_data.agentId"
            v-if="is_show_organizing"
          /> -->
          <!-- <InstitutionSelect v-model="query_data.institutionId" /> -->
          <EventSelect
            v-model="query_data.rootId"
            @title-change="(value)=>{findTitle = value}"
          />
          <el-button
            size="large"
            :icon="Search"
            circle
            :loading="loading"
            @click="handleSearch"
          />
        </el-space>
      </div>
      <div class="echarts-container">
        <div id="echarts-container"></div>
      </div>
    </div>
  </div>
</template>

<script  setup>
import { computed, onMounted, ref } from "vue";
import EventSelect from "@/components/event-select/index.vue"
import InstitutionSelect from "@/components/institution-select/index.vue"
import OrganizingSelect from "@/components/organizing-select/index.vue"
import { useUserStore } from "@/store/user"
import { Search } from "@element-plus/icons-vue"
import * as echarts from 'echarts';
import { GetStatisticsApi } from "@/api";
import { ElMessage } from "element-plus";
const userStore = useUserStore();
const is_show_organizing = computed(() => {
  return userStore.info_data.role == 'organizing'
})
const findTitle = ref("全部赛项")
// 获取报表数据
const loading = ref(false)
const query_data = ref({
  agentId: "",
  institutionId: "",
  rootId: "",
})
const statistics_data = ref({
  auditedNum: 0,
  paidNum: 0,
  pendingNum: 0
})
let myChart = null;
const handleSearch = async () => {
  loading.value = true;
  let res = await GetStatisticsApi(query_data.value);
  if (res.success) {
    //     // ElMessage.error(res.message);
    //   } else {
    statistics_data.value = res.entity;
    handleEchartsSetOption()
  }
  loading.value = false;
}

/**
 * 设置图标数据
 */
const handleEchartsSetOption = () => {
  const color = ['#909399', '#E6A23C', '#67C23A',];
  const value = [
    statistics_data.value.paidNum,
    statistics_data.value.auditedNum + 1000,
    statistics_data.value.pendingNum,
  ]
  // 柱状图
  myChart.setOption({
    tooltip: {},
    xAxis: {
      type: 'value',
    },
    yAxis: {
      type: 'category',
      data: ['已绑定', '未绑定', '待审核'],
    },
    series: [
      {
        name: '人数',
        type: 'bar',
        data: value,
        label: {
          show: true,
          position: 'inside'
        },
        itemStyle: {
          normal: {
            //这里是重点
            color: function (params) {
              return color[params.dataIndex]
            }
          }
        }
      }
    ]
  });
  myChart.clear()
  //   扇形图
  myChart.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    color,
    series: [
      {
        type: 'pie',
        radius: [0, '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          formatter: ' {b|{b}：}{c}  {per|{d}%}  ',
          backgroundColor: '#F6F8FC',
          borderColor: '#8C8D8E',
          borderWidth: 1,
          borderRadius: 4,
          rich: {
            a: {
              color: '#6E7079',
              lineHeight: 22,
              align: 'center'
            },
            hr: {
              borderColor: '#8C8D8E',
              width: '100%',
              borderWidth: 1,
              height: 0
            },
            b: {
              color: '#4C5058',
              fontSize: 14,
              fontWeight: 'bold',
              lineHeight: 33
            },
            per: {
              color: '#fff',
              backgroundColor: '#4C5058',
              padding: [3, 4],
              borderRadius: 4
            }
          }
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          length: 30
        },
        data: [
          { value: statistics_data.value.pendingNum, name: '已报名', },
          { value: statistics_data.value.auditedNum, name: '待绑定' },
          { value: statistics_data.value.paidNum, name: '已绑定' },
        ],
      }
    ]
  });

}

onMounted(() => {
  myChart = echarts.init(document.getElementById('echarts-container'));
  handleSearch();
  userStore.handleGetInformation()
  //   handleEchartsSetOption();

})
</script>

<style lang="scss" scoped>
.statisticstements-container {
  padding: 20px;
  .content-container {
    .descriptions-container {
      padding-bottom: 32px;
      padding-top: 16px;
    }
    .header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .echarts-container {
    padding: 32px;
    box-sizing: border-box;
    width: 100%;
    #echarts-container {
      width: 100%;
      height: 600px;
    }
  }
}
.sub-title {
  font-size: 24px;
}
</style>